<template>
  <view class="ali">
    <!-- ======="state": 0 ,1 ,2====== -->
    <view class="ali_state">
      <block
        v-for="(item, i) in datas"
        :key="i"
      >
        <view class="State_Four">
          <view class="FourBox">
            <text
              class="line"
              :class="[i == 0?'noline':'']"
            ></text>
            <!-- <text class="ali_top_icon" style="margin: 0 0;" v-if="item.information.includes(ways) || i == datas.length -1">发</text> -->
            <!-- =====如果不够，可以再方法和过滤器中同时添加判断-----或者如下的--[v-else-if]操作 -->
            <!-- <text class="ali_top_icon" style="margin: 0 0;" v-else-if="item.information.includes('丰巢智能快递柜') && i!= datas.length-1">待</text> -->
            <text
              class="ali_top_icon"
              :style="{'background-color': item.information.includes('派')? themeStyles.adronmentColor:''}"
              style="margin: 0 0;"
              v-if="!!Type(item.information) == true && i!= datas.length-1"
            >{{item.information | Type}}</text>
            <text
              class="ali_top_icon"
              :style="{'background-color': item.information.includes('派')? themeStyles.adronmentColor:''}"
              style="margin: 0 0;"
              v-else-if="!!Type(item.information) == true && i != datas.length - 1 "
            >{{item.information | Type}}</text>
            <view
              class="ali_top_icons"
              style="margin: 0 0;"
              v-else
            >
              <text
                class="line"
                :class="[i == 0 ? 'noline':'']"
              ></text>
              <text class="ali_top_iconss"></text>
              <text
                class="line"
                :class="[i == 0 ? 'noline':'']"
              ></text>
            </view>
            <text
              class="line"
              :class="[i == datas.length -1?'noline':'']"
            ></text>
          </view>
          <view class="status">
            <text
              class="a14"
              v-if="i == datas.length-1"
            >已发货</text>
            <text
              class="a14"
              v-else
            >{{item.information}}</text>
            <text
              class="a12"
              style="padding-top: 10rpx;"
            >{{item.time}}</text>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  props: ["datas", "state", "ways"],
  data() {
    return {};
  },
  //
  created(){
    //console.log(this.state);
  },
  //过滤返回关键字
  filters: {
    Type(item) {
      let Info;
      let Phone = /\d{11}/;
      if (Phone.test(item) && item.includes("派件")) {
        Info = "派";
      } else if (item.includes("已收取快件")) {
        Info = "揽";
      } else if (item.includes("营业")) {
        Info = "运";
      } else if (item.includes("丰巢智能快递柜")) {
        Info = "待";
      } else if (item.includes("签收")) {
        Info = "收";
      } else {
        Info = "";
      }
      return Info;
    }
  },
  methods: {
    //判断哪个该展示关键字--还是默认
    Type(item) {
      let Info;
      let Phone = /\d{11}/;
      if (Phone.test(item) && item.includes("派件")) {
        Info = "派";
      } else if (item.includes("已收取快件")) {
        Info = "揽";
      } else if (item.includes("营业")) {
        Info = "运";
      } else if (item.includes("丰巢智能快递柜")) {
        Info = "待";
      } else if (item.includes("签收")) {
        Info = "收";
      } else {
        Info = "";
      }
      return Info;
    }
  }
};
</script>

<style lang="scss">
.ali_top_iconss {
  width: 12rpx;
  height: 12rpx;
  display: block;
  background-color: #999;
  padding-right: 2rpx;
  border-radius: 50%;
}
.noline {
  //   background-color: #ffffff !important;
  border-color: #ffffff !important;
}
.State_Four {
  display: flex;
  /* border: 1rpx solid red; */
}

.FourBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 24rpx;
}

.line {
  border: 2rpx dashed rgba(204, 204, 204, 0.5);
  width: 2rpx;
  display: flex;
  flex-direction: column;
  flex: 1;
  //   background-color: rgba(204, 204, 204, 0.5);
}
/* ============= */

.status {
  display: flex;
  flex-direction: column;
  width: 90%;
  padding: 24rpx 0;
}

.borders {
  border-bottom: 1rpx solid #f2f2f2;
  padding: 24rpx 0;
}

.ali_top_icons {
  width: 46rpx;
  height: 46rpx;
  display: block;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.ali_top_icon {
  width: 46rpx;
  height: 46rpx;
  display: block;
  background-color: #83aecf;
  color: #fff;
  font-size: 28rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
}

.ali_top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/* ========公共========= */

.a14 {
  font-size: 22rpx;
  color: $theme-color-main-base;
}

.a12 {
  font-size: 20rpx;
  color: $theme-color-ghost-base;
}
.ali {
  /* width: 100%; */
  /* border: 1rpx solid #F76260; */
  background-color: #ffffff;
  border-radius: 18rpx;
  display: flex;
  flex: 1;
  flex-direction: column;
}
</style>
